/**
 * Created by Dalyn on 2017/3/3.
 */
import React from 'react';
import EventManager from '../util/EventManager.js';
import {hashHistory,Link} from 'react-router';
import Relay from "react-relay";
import Confirm from "../common/Confirm.js";
import InputBox from "../common/InputBox";
import LoginMutation from "./mutation/LoginMutation"
export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            /*账号密码正确*/
            flag: true,
            /*是否进入 选择企业账户页面*/
            isAccount: true,
            title:'欢迎登录衣有道系统',
            is:true,
        }
        this.style = {
            username: {
                width: "221px",
                height: "40px",
                paddingLeft: '36px',
                borderColor: "#bbbbbb",
                marginTop: "15px",
            },
            password: {
                width: "221px",
                height: "40px",
                paddingLeft: '36px',
                borderColor: "#bbbbbb",
                marginTop: "15px",
            },
            confirm: {
                width: '256px',
                backgroundColor: "#163249",
                height: '42px',
                fontSize: "18px",
                color: "#fff",
                marginTop: "16px",
                fontFamily: "Microsoft YaHei"
            },
            userIcon: {
                position: 'absolute',
                top: '113px',
                left: '54px',
                zIndex: 1,
            },
            passIcon: {
                position: 'absolute',
                left: '54px',
                top: '170px',
            }
        };
        this.isshow = 'none';
    }

    componentWillMount() {
        if(this.props.params.channel=='password'){
            this.setState({
                title:'重置密码成功，请重新登录'
            });
        }
    }

    login(is) {
        let username = this.refs.username.state.text;
        let password = this.refs.password.state.text;
        if(username==''){
            this.isshow = 'block'
            this.refs.username.setState({
                errorhint:'用户名不能为空'
            });
            this.setState({
                is:!is
            });
            return
        }
        if(username.length!=11){
            this.isshow = 'block'
            this.refs.username.setState({
                errorhint:'格式不正确'
            });

            this.setState({
                is:!is
            });
            return
        }

        if(password==''){
            this.isshow = 'block'
            this.refs.username.setState({
                errorhint:'密码不能为空'
            });
            this.setState({
                is:!is
            });
            return
        }
        if(password.length<=5||password.length>=33){
            this.isshow = 'block'
            this.refs.username.setState({
                errorhint:'密码格式不正确'
            });
            this.setState({
                is:!is
            });
            return
        }

        Relay.Store.commitUpdate(
            new LoginMutation({
                phone: username,
                password: password,
            }),
            {
              onFailure: () => {
                // alert('请求失败');
              },
              onSuccess: (response) => {
                  let errorCode = response.login.login.errorCode;
                  let value = response.login.login.value;
                  let token = response.login.login.token;
                  let uid = '';
                  let roleId = '';
                  let name = '';
                  let phone = '';
                  //用户名本地缓存
                  if(response.login.login.userModel!=null){
                      let userModel = response.login.login.userModel;
                      uid = userModel.uid;
                      name = userModel.name;
                      roleId = userModel.roleId;
                      phone = userModel.phone;
                  }
                  if(errorCode==0){
                      let enterpriseDomainList = response.login.login.userModel.enterpriseDomainList;
                      if(enterpriseDomainList==null){
                          this.isshow = 'block';
                          this.refs.username.setState({
                              errorhint:'用户被禁用'
                          });
                          this.setState({
                              is:!is
                          });
                          return;
                      }
                      sessionStorage.setItem('uid',uid);
                      sessionStorage.setItem('username',name);
                      sessionStorage.setItem('phone',phone);
                      hashHistory.push('/myaccount/');
                      sessionStorage.setItem('uid',uid);
                      hashHistory.push('/myaccount/');


                      /*
                      if(enterpriseDomainList != null && enterpriseDomainList.length == 1){
                          let pId = enterpriseDomainList[0];
                          if (pId !='' && pId != undefined && pId != null){
                              sessionStorage.setItem('permissionId',pId);
                          }
                      }*/
                  }else{
                      this.isshow = 'block';
                      this.refs.username.setState({
                          errorhint:value
                      });
                      this.setState({
                          is:!is
                      });
                  }
              }
            }
        )


    }
    keyupon(code) {
      if (code == 13) {
        this.login()
      }
    }
    bluron(type) {
        let rs = false;
        switch (type) {
            case
            'name':
                let username = this.refs.username.state.text.trim();
                if (username == "") {
                    this.refs.username.setState({
                        errorhint:'用户名不能为空'
                    });
                }else if(username.length!=11){
                    this.refs.username.setState({
                        errorhint:'格式不正确'
                    });
                } else {
                    this.refs.username.setState({
                        errorhint:''
                    });
                    rs = true;
                }

                return rs;
        }
        switch (type) {
            case
            'pwd':
                let password = this.refs.password.state.text.trim();
                if (password == "") {
                    this.refs.username.setState({
                        errorhint:'密码不能为空'
                    });
                    }else if(password.length<=5||password.length>=33){
                        this.refs.username.setState({
                            errorhint:'密码格式不正确'
                        });
                }else{
                    this.refs.username.setState({
                        errorhint:''
                    });
                    rs = true;
                }
                return rs;
        }
    }
    render() {
        return (
            <div style={Style.box}>
                <p style={Style.p}>{this.state.title}</p>
                <img style={this.style.userIcon} src={require("./img/people.png")} alt="" />
                <img style={this.style.passIcon} src={require("./img/password.png")} alt="" />
                <InputBox style={this.style.username} defaultvalute="请输入用户名" ref={'username'}  maxlength={11} errorhint={this.isshow} keyupon={this.keyupon.bind(this)} isloginintext={true} bluron={this.bluron.bind(this,'name')}/>
                <InputBox style={this.style.password} defaultvalute="请输入密码" type={'password'} ref={'password'} isloginintext={true} maxlength={32} keyupon={this.keyupon.bind(this)} bluron={this.bluron.bind(this,'pwd')}/>
                <div style={Style.check} className="clear">
                 
                    <Link to={"/find_pw1"}>
                        <span style={Style.span}>忘记密码？</span>
                    </Link>
                </div>
                <Confirm style={this.style.confirm} className="login_confirm" tcontext={'登 录'}
                         touch={this.login.bind(this,this.state.is)}/>

            </div>
        );
    }
}

var Style = {
    box: {
        width: "259px",
        height: "329px",
        margin: "0 auto",
        padding: "10px 0"
    },
    p: {
        height: "18px",
        fontSize: "20px",
        textAlign: "center",
        lineHeight: "18px",
        verticalAlign: "middle",
        padding: "28px 0",
        margin: "0 auto",
        color: "#1b3249",
        fontFamily: "Microsoft YaHei"
    },
    check: {
        width: "256px",
        height: "13px",
        textAlign: "left",
        lineHeight: "13px",
        padding: "11px 0",
        margin: "0 auto",
    },
    label: {
        fontSize: "12px",
        color: '#000',
        verticalAlign: "-2px",
        fontFamily: "Microsoft YaHei"
    },
    input: {
        width: "14px",
        height: "14px",
        verticalAlign:"-3px"
    },
    span: {
        float: "right",
        color: "#36b3b3",
        fontSize: "12px",
        textDecoration: 'underline',
        fontFamily: "Microsoft YaHei"
    },
    span1: {
        float: "right",
        fontSize: "12px",
        color: '#333',
        fontFamily: "Microsoft YaHei"
    },
    apply: {
        marginTop: "15px"
    }
}
